<template>
  <div>
    <div>
      <x-header style="background-color:#10aeff;">保修信息</x-header>
      <load-more v-if="info" tip="暂无信息" :show-loading="false" background-color="#fbf9fe"></load-more>
      <div style="padding:0 10px" v-for="device in ServiceProductList">
        <load-more :tip="device.brand +'-'+ device.kind_name + '-'+ device.model" :show-loading="false" background-color="#fbf9fe"></load-more>
        <div v-if="device.device_baoxiu.length">
          <group label-width="5em" :title="item.StartDate + ' 至 ' + item.EndDate" v-for="item in device.device_baoxiu" :key="item.id">
            <cell :value="item.Remark" style="text-algin:left"></cell>
            </cell>
          </group>
        </div>
      </div>
    </div>

    <div v-transfer-dom>
      <loading :show="show" text="加载中"></loading>
    </div>
  </div>
</template>

<script>
import { Cell, Group, LoadMore, XHeader, TransferDom, Loading } from "vux";
import axios from "axios";
export default {
  directives: {
    TransferDom
  },
  components: {
    Cell,
    Group,
    LoadMore,
    XHeader,
    Loading
  },
  data() {
    return {
      ServiceProductList: [],
      show: true,
      info: this.$store.state.info.deviceList.length == 0 ? true : false
    };
  },

  created() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      for (const key in this.$store.state.info.deviceList) {
        let device = {};
        device.brand = this.$store.state.info.deviceList[key].brand;
        device.serial_number = this.$store.state.info.deviceList[
          key
        ].serial_number;
        device.model = this.$store.state.info.deviceList[key].model;
        device.kind_code = this.$store.state.info.deviceList[key].kind_code;
        device.kind_name = this.$store.state.info.deviceList[key].kind_name;
        device.device_baoxiu = [];

        if (this.$store.state.info.deviceList[key].device_baoxiu) {
          let baoxiu = this.$store.state.info.deviceList[
            key
          ].device_baoxiu.replace(/'/g, '"');
          device.device_baoxiu = JSON.parse(baoxiu);
        } else if (
          this.$store.state.info.deviceList[key].brand == "Lenovo" &&
          this.$store.state.info.deviceList[key].kind_code == "C"
        ) {
          console.log(device);
          let instance = axios.create({
            headers: { "content-type": "application/json" }
          });
          try {
            let info = await instance.post(
              `http://192.168.10.19:4000/graphql`,
              {
                query: `{info (QueryType:"baoxiu",ProductSn:"${
                  device.serial_number
                }")}`
              }
            );
            device.device_baoxiu = JSON.parse(
              info.data.data.info
            ).ServiceProductList;
          } catch (error) {
            console.error(error);
          }
        }
        this.ServiceProductList.push(device);
      }
      this.show = false;
    }
  }
};
</script>

<style scoped>
.vux-cell-bd {
  display: none;
}
.weui-cell__ft {
  text-align: left !important;
}
</style>



